<template>
  <el-dialog
    :title="ruleForm.id?'修改管理员':'添加管理员'"
    :visible.sync="showDialog"
    width="48%"

    @close="reset"
  >
    <el-form
      ref="formDate"
      :inline="true"
      :model="ruleForm"
      :rules="rules"
    >
      <el-row
        type="flex"
        justify="space-between"
      >
        <el-form-item
          label="管理员名称"
          prop="username"
        >
          <el-input
            v-model.trim="ruleForm.username"
            placeholder="请输入姓名"
            style="width:220px"
            size="medium"
          />
        </el-form-item>
        <el-form-item
          label="管理员邮箱"
          prop="email"
        >
          <el-input
            v-model="ruleForm.email"
            placeholder="请输入邮箱"
            style="width:220px"
            size="medium"
          />
        </el-form-item>
      </el-row>
      <el-row
        type="flex"
        justify="space-between"
      >
        <el-form-item
          label="管理员密码"
          prop="password"
          style="margin-left:10px"
        >
          <el-input
            v-model="ruleForm.password"
            placeholder="请输入密码"
            style="width:220px"
            size="medium"
          />
        </el-form-item>
        <el-form-item
          label="管理员手机"
          prop="phone"
        >
          <el-input
            v-model.number="ruleForm.phone"
            placeholder="请输入手机"
            style="width:220px"
            size="medium"
          />
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item
          label="管理员状态"
          style="margin-left:10px"
          prop="status"
        >
          <el-switch
            v-model="ruleForm.status"
            active-text="启用"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="2"
          />
        </el-form-item>
        <el-form-item
          label="管理员头像"
          style="margin-left:160px"
        >
          <el-button
            type="success"
            @click="$refs.ImgUpload.innerVisible=true"
          >选择</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item
          label="管理员状态"
          prop="roleid_list"
        >
          <el-checkbox-group v-model="ruleForm.roleid_list">
            <el-checkbox
              v-for="item in roleList"
              :key="item.id"
              :value="item.id"
              :label="item.id"
            >
              {{ item.role_name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-row>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="reset">取 消</el-button>
      <el-button
        type="primary"
        @click="addRole"
      >确 定</el-button>
    </span>
    <ImgUpload ref="ImgUpload" @uploadImg="uploadImg" />
  </el-dialog>
</template>

<script>
// 导入请求
import { getRoleList, addRole, updateUserInfo } from '@/api/user'
// 导入自定义验证规则
import { validatePhone } from '@/utils/validate'
// 自定义校验多选框
var validateRoles = (rule, value, callback) => {
  if (value.length >= 4) {
    callback(new Error('角色不能超过三个！'))
  }
}
import ImgUpload from './ImgUpload.vue'
export default {
  name: 'AddUser',
  components: {
    ImgUpload
  },
  data() {
    return {
      showDialog: false, // 弹出层
      roleList: [], // 管理员角色
      ruleForm: { // 表单
        username: '',
        phone: '',
        email: '',
        password: '',
        roleid_list: [], // 选中按钮
        status: '', //
        avatar: ''
      },
      rules: {
        username: [{ required: true, trigger: 'blur', message: '姓名不能为空' }

        ],
        phone: [
          { required: true, trigger: 'blur', message: '手机号不能为空' },
          { validator: validatePhone, trigger: 'blur', message: '手机号格式不对' }
        ],
        email: [
          { required: true, trigger: 'blur', message: '邮箱不能为空' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [

          { min: 6, max: 12, message: '长度在 6 到 12 个字符' }
        ],
        roleid_list: [
          { required: true, trigger: 'change', message: '请选择角色' },
          { validator: validateRoles, trigger: 'change', message: '最多只能选择3个角色' }]
      }
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() { // 获取管理员状态列表
      const { data } = await getRoleList()
      this.roleList = data.list
    },
    async addRole() {
      if (this.ruleForm.id) { // 添加管理员
        await updateUserInfo(this.ruleForm)
      } else {
        await addRole(this.ruleForm)
      }
      this.$message.success('操作成功！')

      this.$nextTick(function() {
        this.$emit('update-list')
      })

      this.showDialog = false
    },
    async  reset() {
      this.$refs.formDate.resetFields()
      this.ruleForm = {
        username: '',
        phone: '',
        email: '',
        password: '',
        roleid_list: [], // 选中按钮
        status: ''//
      }
      this.showDialog = false
    },
    uploadImg(imgUrl) { // 图片上传完成后
      this.ruleForm.avatar = imgUrl
    }

  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__header {
  background: #66b1ff;
}
</style>
